<template>
  <div v-if="guideShow">
    <div v-if="isGuide">
      <div class="guide-container" :class="{'zoomOutDown': !guideCountShow}">
        <div class="guide-box">
          <img :src="guideShareLink" class="guide-img">
          <p class="count-down-text">{{second}}s 后进入投票列表页</p>
          <div class="close-icon" @click="onCloseGuide">
            <img src="../assets/img/guide-close-icon.png">
          </div>
        </div>
      </div>
    </div>
    <div v-show="show" @click="isShow">
      <img src="../assets/img/pc-footer-show.png" class="pc-footer-show">
    </div>
    <div class="pc-guide-footer-container" v-if="!guideCountShow" :class="{'narrow': show, 'open': !show}">
      <div class="guide-footer-box">
        <div class="vote-step-box">
          <img src="../assets/img/vote-step-bg.png" class="vote-step-bg">
        </div>
        <div class="vote-code-box">
          <div class="qrcode-box">
            <img :src="voteLink" alt="" class="qrcode">
            <p class="qrcode-title">品牌中网</p>
            <p class="qrcode-content">M端二维码</p>
          </div>
        </div>
        <img src="../assets/img/pc-footer-close.png" class="close-bottom-icon" @click="isShow">
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      guideShow: false,
      isGuide: false,
      guideCountShow: true,
      show: false,
      second: 5
    }
  },
  computed: {
    ...mapState({
      voteLink: s => s.voteLink,
      guideShareLink: s => s.guideShareLink
    })
  },
  mounted() {
    let isGuideShow = window.sessionStorage.getItem('guideShow')
    if (isGuideShow) {
      this.guideCountShow = false
      this.isGuide = false
    } else {
      this.isGuide = true
    }
    if (!this.$getDeviceInfo().isPhone && !this.$getDeviceInfo().isWeiXin) {
      this.guideShow = true
      window.sessionStorage.setItem('guideShow', true)
    }
    this.$nextTick(() => {
      setInterval(() => {
        if (this.second <= 0) {
          this.guideCountShow = false
          return
        }
        this.second--
      }, 1000)
    })
  },
  methods: {
    onCloseGuide() {
      setTimeout(() => {
        this.guideCountShow = false
      }, 300)
    },
    isShow() {
      this.show = !this.show
      this.$emit('guideshow', !this.show)
    }
  }
}
</script>
<style lang='scss' scoped>
.guide-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  .guide-box {
    width: 600px;
    margin: 136px auto 0;
    text-align: center;
    .guide-img {
      width: 600px;
      height: 570px;
    }
    .count-down-text {
      margin-top: 44px;
      font-size: 36px;
      line-height: 42px;
      color: rgba(255, 255, 255, 1);
    }
    .close-icon {
      position: fixed;
      top: 56px;
      right: 88px;
      cursor: pointer;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
.pc-footer-show {
  width: 281px;
  height: 96px;
  position: fixed;
  bottom: 96px;
  right: 0;
}
.pc-guide-footer-container {
  width: 100%;
  height: 352px;
  background: url("../assets/img/pc-guide-bg.png") center no-repeat;
  background-size: cover;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 9;
}
.guide-footer-box {
  width: 100%;
  height: 100%;
  position: relative;
  .vote-step-box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .vote-step-bg {
      width: 778px;
      height: 223px;
    }
  }

  .vote-code-box {
    width: 331px;
    height: 371px;
    background: url("../assets/img/pc-footer-logo-bg.png") center no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 34px;
    left: -990px;
    right: 0;
    margin: auto;
    .qrcode-box {
      padding: 17px 15px;
      width: 166px;
      height: 225px;
      background: rgba(255, 255, 255, 1);
      border-radius: 20px;
      margin: 160px auto 0;
      .qrcode {
        width: 136px;
        height: 136px;
      }
      .qrcode-title {
        font-size: 24px;
        line-clamp: 24px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
      .qrcode-content {
        font-size: 16px;
        color: #999999;
      }
    }
  }
}

.close-bottom-icon {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 240px;
  right: 30px;
  cursor: pointer;
}
.narrow {
  transform: translate3d(100%, 0, 0);
  transition: transform 0.2s ease;
}
.open {
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s ease;
}
.zoomOutDown {
  animation: zoomOutDown 0.3s both;
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
</style>
